<template>
  <base-modal
    :title="$t('common.base.bulkEdit')"
    :show.sync="visible"
    width="500px"
    class="event-batch-edit-dialog"
  >
    <batch-form :fields="fields" ref="batchForm" />

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="onSubmit" :disabled="pending">{{$t('common.base.makeSure')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import { FormFieldMap } from "@src/component/form/components";
import * as Utils from "@src/component/form/util";
import { safeNewDate } from '@src/util/time';
/* Api */
import * as EventApi from "@src/api/EventApi.js";
import { useFormTimezone, formatAddress } from 'pub-bbx-utils'
const { disposeFormSubmitTime } = useFormTimezone()

export default {
  name: "event-batch-edit-dialog",
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    selectedIds: {
      type: Array,
      default: () => [],
    },
    selectList:{
      type: Array,
      default: () => [],
    },
  },
  data: () => {
    return {
      visible: false,
      pending: false,
      renderKey: ''
    };
  },
  watch: {
    visible(val) {
      if(val) {
        this.$refs.batchForm.reset();
      }
    }
  },
  computed: {
    fields() {
      const { fields } = this.config;
      const list = [];
      let formTypes = ['attachment', 'separator', 'location', 'info', 'autograph', 'formula', 'related_task','logistics'];
      let isNotModify = ['text', 'textarea', 'number'];
      let isRepeat = ['text', 'textarea', 'number','phone'];

      fields.map((item) => {
        if (
          item.enabled &&
          item.field != "eventNo" &&
          item.field != "attachment" &&
          item.field != "customer" &&
          item.field != "relationProduct" &&
          item.field != "relationCustomer" &&
          item.formType !== "relationCustomer" && 
          item.formType !== "relationProduct"
        ) {
          list.push(item);
        }
      });
      
      let filterFields = list
      // 过滤 分割线、说明信息、位置、附件、电子签名、关联工单、计算公式、物流组件
      .filter(f => !formTypes.includes(f.formType))
      // 过滤 不允许修改的单行、多行、数字
      .filter(f => !(isNotModify.includes(f.formType) && f.setting?.defaultValueConfig && !!f.setting.defaultValueConfig.isNotModify ))
      // 过滤 不允许重复的单行、多行、数字、电话
      .filter(f => !(isRepeat.includes(f.formType) && f.setting?.isRepeat == 1))

      return filterFields;
    },
  },
  methods: {
    open() {
      this.visible = true;
    },
    buildParams() {
      let tv = null;
      const { form, selectedField: sf } = this.$refs.batchForm.returnData();

      // 处理国际化时间转换
      const formValue = disposeFormSubmitTime([sf], form)
      let params = {
        mapJson: JSON.stringify(formValue),
        ids: this.selectedIds.join(","),
        fieldType: sf.isSystem,
        formType: sf.formType
      };

      if (sf.fieldName === "tags") {
        params.mapJson = JSON.stringify({
          [sf.fieldName]: form[sf.fieldName].map(({ id, tagName }) => ({
            id,
            tagName,
          })),
        });
      }
      if (sf.formType === "user") {
        tv = form[sf.fieldName];
        // 批量修改协同人
        if(sf.fieldName == 'synergies' && sf?.setting?.isMultiple) {
          params.mapJson = JSON.stringify({
            [sf.fieldName]:  form[sf.fieldName]
          });
        }else{
          params.mapJson = JSON.stringify({
            [sf.fieldName]: {
              userId: tv.userId,
              displayName: tv.displayName,
              staffId: tv.staffId,
              head: tv.head
            },
          });
        }
      }
      if (sf.fieldName === "manager") {
        tv = form[sf.fieldName];

        params.mapJson = JSON.stringify({
          [sf.fieldName]: {
            id: tv.userId,
            name: tv.displayName,
            staffId: tv.staffId,
          },
        });
      }

      if (sf.formType === "address") {
        tv = form[sf.fieldName];
        params.mapJson = JSON.stringify({
          [sf.fieldName]: {
            ...tv,
            all: formatAddress(tv,'')
          },
        });
      }

      return params;
    },
    async onSubmit() {
      const { config } = this;
      const buildParams = this.buildParams();
      
      let params = {
        eventIds: buildParams.ids,
        eventModule: config.type || '', // order
        templateId: config.currentEventType.id,
        mapJson: buildParams.mapJson,
        fieldName: '',
        value: '',
        formType: buildParams.formType
      };
      await Utils.bgiPrivateVerification(this.selectList, 
          { AddressKey: 'cusAddress', CountryKey: 'country', formType: params.formType })

      for (let key in JSON.parse(buildParams.mapJson)) {
        params.fieldName = key;
        params.value = JSON.parse(buildParams.mapJson)[key];
      }
      if (!params.value) {
        this.$message.warning(this.$t('task.tip.batchEditCustomerTip1'));
        return;
      }
      const { status, message, data } = await EventApi.eventBatchEdit(params);
      if (status === 1) {
        let msg = message;
        if (data) {
          const { fail, succ } = data;
          msg += "： ";
          fail.forEach((item, index) => {
            msg += item.eventNo;
            if (index !== fail.length - 1) {
              msg += ",";
            }
          });
          msg += this.$t('common.modal.BatchAllotPartSuccessMessage', {successCount: succ.length});
        }
        this.$notify({
          title: data ? this.$t('common.base.toast') : this.$t('common.base.error') ,
          message: msg,
          type: data ? 'warning' : 'error'
        });
      } else {
        this.$notify({
          title: this.$t('common.base.success'),
          message: message,
          type: 'success'
        });
      }
      this.visible = false;
      this.$emit("update");
    },
  },
  components: {
    BatchForm: {
      name: "batch-form",
      props: {
        fields: {
          type: Array,
          default: () => [],
        },
      },
      data: () => {
        return {
          selectedField: {},
          form: {},
        };
      },
      mounted() {
        this.reset();
        // this.buildForm();
      },
      methods: {
        returnData() {
          return {
            selectedField: this.selectedField,
            form: Object.assign({}, this.form),
          };
        },
        reset() {
          this.form = {};
          this.selectedField = {};
          if (!this.fields.length) return
          this.selectField(this.fields[0].fieldName);
        },
        dispatch({ type, bubbles = false, params = {} }) {
          // const _dom = Array.prototype.slice
          //   .call(this.$el.children)
          //   .filter((d) => /form-item/g.test(d.className))[0];
          this.$refs.editForm.$el.dispatchEvent(
            new CustomEvent(type, { detail: params, bubbles })
          );
        },
        buildForm() {
          if (Object.keys(this.form).length === this.fields.length) return;
          this.form = Utils.initialize(this.fields);

          this.fields.forEach((f) => {
            if (f.fieldName === "tags" && f.formType === "select") {
              this.form[f.fieldName] = [];
            }
          });
        },
        update(event) {
          /**
           * 选择团队使用的是单独的组件，不是统一的form组件，所以更新时的返回值不同，需要特殊处理
           */
          if (this.selectedField.fieldName === "tags") {
            this.form[this.selectedField.fieldName] = event;
            return;
          }

          const f = event.field;
          this.form = { [f.fieldName]: event.newValue };
        },
        selectField(val) {
          this.buildForm()
          this.renderKey = val // form-item组件重新渲染

          this.selectedField = this.fields.filter(
            (f) => f.fieldName === val
          )[0];

          this.dispatch({
            type: "form.add.field",
            params: {
              value: () => this.form[this.selectedField.fieldName],
              field: this.selectedField,
              fieldName: this.selectedField.fieldName,
            },
          });

          this.dispatch({
            type: "form.clear.validate",
          });
        },
        renderSelector() {
          if (!this.fields) return null;
          return (
            <el-select
              value={this.selectedField.fieldName}
              placeholder={this.$t('common.placeholder.selectNeedChangeField')}
              onChange={this.selectField}
            >
              {this.fields.map((f) => (
                <el-option
                  key={f.fieldName}
                  label={f.displayName}
                  value={f.fieldName}
                ></el-option>
              ))}
            </el-select>
          );
        },

        renderInput(h) {
          const sf = this.selectedField;

          if (!sf.formType) return null;

          if (sf.fieldName === "tags") {
            return h("biz-team-select", {
              props: {
                multiple: true,
                value: this.form[sf.fieldName],
              },
              on: {
                input: (event) => this.update(event),
              },
            });
          }

          const comp = FormFieldMap.get(sf.formType);
          const data = {
            props: {
              field: sf,
              value: this.form[sf.fieldName],
              placeholder: Utils.genPlaceholder(sf),
              seo: true
            },
            on: {
              update: (event) => this.update(event),
            },
          };
          // if (sf.formType === 'address' && !sf.isSystem) {
          //   data.props.disableMap = true;
          // }

          return h(comp.build, data);
        },
      },
      render(h) {
        return (
          <div>
            <div class="item">
              <label class="form-name">{this.$t('common.fields.modifyField.displayName')}</label>
              <div>{this.renderSelector()}</div>
            </div>
            <form-item ref="editForm" label={this.$t('customer.batchEditingCustomerDialog.fixField.inputLabel')} key={this.renderKey}>{this.renderInput(h)}</form-item>
          </div>
        );
      },
    },
  },

};
</script>

<style lang="scss">
.event-batch-edit-dialog {
  .base-modal-body {
    padding: 10px 30px 0;
  }

  .form-name,
  .form-item label {
    width: 70px;
    padding: 0;
    line-height: 32px;
    margin-bottom: 10px;
  }

  .item {
    display: flex;
    justify-content: space-between;
    line-height: 32px;
    div {
      flex-grow: 1;
      .el-select {
        width: 100%;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
